import React, { useState } from 'react';
import { Layout } from 'antd';
import './less/basicLayout.less';

const { Content } = Layout;
import BasicHeader from './BasicHeader';
import BasicNav from './BasicNav';

function BasicLayout(props) {
  const [show, setShow] = useState(false);

  const toggle = () => {
    setShow(!show);
  };

  return (
    <Layout className="base-layout">
      <BasicNav isShow={show} />
      <Layout className="site-layout">
        <BasicHeader isShow={show} menuClick={toggle} />
        <Content className="site-layout-background layout-content">
          {props.children}
        </Content>
      </Layout>
    </Layout>
  );
}

export default BasicLayout;
